<template>
  <view class="container">
    <view>
      <u-navbar
        backIconColor="#fff"
        title-size="36"
        title="投资商中心"
        :is-back="true"
        :background="background"
        :border-bottom="false"
        title-color="#fff"
      >
      </u-navbar>
      <view class="" style="position: relative">
        <view
          class="contentBg"
          :style="{
            paddingTop: `${statusBarHeight + navbarHeight}px`,
            backgroundImage: `url(${getImageUrl('alli-bg.png')})`,
            height: `${228 + statusBarHeight}px`,
            top: `-${statusBarHeight + navbarHeight}px`
          }"
        >
        </view>
      </view>
      <view class="content">
        <view class="top dis-flex flex-y-between flex-y-center">
          <view class="t-l dis-flex">
            <u-avatar src="" size="120"></u-avatar>
            <view class="u-info">
              <view>用户姓名</view>
              <view class="id">投资商</view>
            </view>
          </view>
          <view class="t-r dis-flex flex-y-between flex-x-top">
            <view class="dis-flex flex-y-center">
              <u-icon style="margin-right: 10rpx" name="/static/tishi.png" size="28"></u-icon>
              <text>权益说明</text>
            </view>
          </view>
        </view>

        <view class="card">
          <view class="dis-flex flex-y-between" style="margin-bottom: 34rpx">
            <view
              class="amount-item"
              @click="routeToAmount(amount.type)"
              v-for="(amount, i) in companyAmount"
              :key="i"
            >
              <view class="count">{{ amount.count }}</view>
              <view class="name">{{ amount.name }}</view>
            </view>
          </view>
          <u-line></u-line>
          <view class="amount-bt dis-flex flex-y-center flex-y-between">
            <view class="bt-l">可提现收益 <text>100</text></view>
            <view class="bt-r" @click="routeTo('/gather/invest/withdrawal')">可提现</view>
          </view>
        </view>
        <u-gap height="20"></u-gap>
        <view class="card order-wapper dis-flex flex-y-center flex-y-between">
          <view class="card-tl">经营订单<text>待处理订单数 12</text></view>
          <view class="more dis-flex flex-y-center">
            <text>更多</text>
            <u-icon name="/static/enter.png" size="24"></u-icon>
          </view>
        </view>
        <u-gap height="20"></u-gap>
        <view class="card goods-wapper">
          <view class="goods-top dis-flex flex-y-center flex-y-between">
            <view class="card-tl">商品管理</view>
            <view class="more dis-flex flex-y-center">
              <text>更多</text>
              <u-icon name="/static/enter.png" size="24"></u-icon>
            </view>
          </view>
          <view class="goods-content dis-flex flex-y-center flex-y-between">
            <view
              class="amount-item"
              @click="routeToGoods(amount.type)"
              v-for="(amount, i) in goodsAmount"
              :key="i"
            >
              <view class="count">{{ amount.count }}</view>
              <view class="name">{{ amount.name }}</view>
            </view>
          </view>
        </view>

        <view class="service">
          <view
            class="service-item dis-flex flex-y-center"
            v-if="ser.level ? ser.level === userLevel : true"
            @click="routeTo(ser.path)"
            v-for="(ser, index) in companyServices"
            :key="ser.id"
          >
            <u-icon :name="ser.icon" size="90"></u-icon>
            <text>{{ ser.name }}</text>
          </view>
        </view>
        <u-gap height="20"></u-gap>
      </view>
    </view>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
export default {
  data() {
    return {
      userLevel: 2, //1 高级合伙人 2经理
      chartData: {},
      checkEchart: '',
      companyAmount: [
        {
          id: 'income',
          name: '今日收益',
          count: '355',
          type: 'today'
        },
        {
          id: 'income',
          name: '待入账收益',
          count: '355',
          type: 'no'
        },
        {
          id: 'syc',
          name: '累计总收益',
          count: '12676',
          type: 'all'
        }
      ],
      goodsAmount: [
        {
          id: 'sales',
          name: '销售中',
          count: '355',
          path: '/attract/beans'
        },
        {
          id: 'nostock',
          name: '低库存',
          count: '55',
          path: '/attract/beans'
        },
        {
          id: 'syc',
          name: '已下架',
          count: '12676',
          path: '/attract/income'
        }
      ],
      companyServices: [
        {
          id: 'wdtd',
          name: '商家管理',
          icon: '/static/gather/sjgl.png',
          path: '/attract/items-user'
        },
        {
          id: 'tgm',
          name: '员工管理',
          icon: '/static/gather/yggl.png',
          path: '/attract/share'
        },
        {
          id: 'symx',
          name: '邀请码',
          icon: '/static/attract/tgm.png',
          path: '/attract/income-list'
        },
        {
          id: 'wytx',
          name: '采购商品',
          icon: '/static/gather/cgsp.png',
          path: '/gather/goods-list'
        },
        {
          id: 'txjl',
          name: '采购订单',
          icon: '/static/gather/cgdd.png',
          path: '/gather/invest/pur-order-list'
        }
      ],
      background: {
        background: 'transparent'
      },
      background1: {
        background: '#10A28F'
      },
      imgStyle: {
        width: '12rem'
      },
      statusBarHeight: systemInfo.statusBarHeight
    }
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  methods: {
    handleScroll(e) {
      // 页面滚动时触发
      this.scrollTop = e.detail.scrollTop // 更新滚动位置
      // console.log('页面上滑', this.scrollTop);
    },
    queryList() {},
    onCheckEchart(type) {
      const app = this
      app.checkEchart = type
      app.getServerDataList()
    },
    getServerDataList(ymd = '') {
      const app = this
      let limit
      if (app.checkEchart == 'week') {
        limit = 7
      }
      if (app.checkEchart == 'month') {
        limit = 30
      }
      let params = {
        limit: limit
      }
      let chartData = {
        categories: res.categories,
        series: [
          {
            name: '成交收入',
            type: 'line',
            data: res.series
          }
        ]
      }
      app.chartData = JSON.parse(JSON.stringify(chartData))
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    routeToAmount(type) {
      uni.navigateTo({
        url: '/gather/invest/income-list?type=' + type
      })
    },
    changeType() {
      const app = this
      uni.showLoading({
        title: '切换中',
        mask: true
      })
      setTimeout(function () {
        app.isUser = !app.isUser
        uni.hideLoading()
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.popup-box {
  width: 100%;
  height: 100%;
  padding: 20rpx;
}
.charts-box {
  width: 100%;
  height: 463rpx;
}
.container {
  height: 100vh;
}

.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  // height: 448rpx;
}

.content {
  position: relative;
  padding: 39rpx 0;

  .top {
    padding: 0 20rpx;
    margin-bottom: 30rpx;
    height: 120rpx;

    .u-info {
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      padding: 12rpx 20rpx;
      font-size: 34rpx;
      color: #ffffff;

      .id {
        width: 120rpx;
        height: 40rpx;
        line-height: 40rpx;
        background: #e8fffc;
        border-radius: 20rpx;
        font-size: 24rpx;
        color: #10a28f;
        text-align: center;
      }
    }

    .t-r {
      flex-flow: column;
      height: 120rpx;
      padding: 16rpx 0;
      align-items: flex-end;
      color: #fff;
      font-size: 24rpx;
    }
  }

  .card {
    // height: 280rpx;
    background: #ffffff;
    border-radius: 10rpx;
    padding: 40rpx 20rpx;
    margin: 0 20rpx;
    flex-wrap: wrap;
  }

  .amount-item:nth-child(1),
  .amount-item:nth-child(2),
  .amount-item:nth-child(3) {
    margin-top: 0;
  }

  .amount-item {
    text-align: center;
    justify-content: space-between;
    display: flex;
    flex-flow: column;
    width: 33%;
    margin-top: 30rpx;

    .count {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    .name {
      font-size: 26rpx;
    }
  }

  .service {
    // width: 100%;
    margin: 0 20rpx;
    height: 200rpx;
    background: #ffffff;
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    padding: 30rpx;

    .service-item {
      // width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-flow: column;
      font-size: 26rpx;
      color: #333333;

      .service-name {
        font-size: 28rpx;
        color: #333333;
      }
    }
  }
}

.mr-20 {
  margin-right: 40rpx;
}

.amount-bt {
  margin-top: 30rpx;
  .bt-l {
    font-size: 26rpx;
    text {
      font-weight: 600;
      font-size: 36rpx;
      margin-left: 20rpx;
    }
  }
  .bt-r {
    width: 120rpx;
    height: 50rpx;
    background: #10a28f;
    border-radius: 25rpx;
    line-height: 50rpx;
    text-align: center;
    font-size: 24rpx;
    color: #ffffff;
  }
}
.card-tl {
  font-size: 30rpx;
  text {
    font-size: 26rpx;
    color: #fa453c;
    margin-left: 20rpx;
  }
}
.more {
  font-size: 24rpx;
  color: #999999;
}
.goods-content {
  margin-top: 40rpx;
}
</style>
